<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { binDraw } from '@/utils/utils'
import * as echarts from 'echarts'
import { id } from 'element-plus/es/locales.mjs';
const chartBin1 = ref(null);
const chartBin2 = ref(null);
const chartBin3 = ref(null);
const chartBin4 = ref(null);
const getStitic = async () => {
  try {
    const data1 = {
      number: 6,
      titleName: "Total",
      data: [
        {
          value: 20,
          name: "acknow"
        },
        {
          value: 0,
          name: "openalarm"
        }
      ]
    }
    const data2 = {
      number: 18,
      titleName: "Total",
      data: [
        {
          value: 18,
          name: "acknow"
        },
        {
          value: 18,
          name: "openalarm"
        }
      ]
    }
    const data3 = {
      number: 38,
      titleName: "Total",
      data: [
        {
          value: 62,
          name: "acknow"
        },
        {
          value: 38,
          name: "openalarm"
        }
      ]
    }
    const data4 = {
      number: 45,
      titleName: "Total",
      data: [
        {
          value: 55,
          name: "acknow"
        },
        {
          value: 45,
          name: "openalarm"
        }
      ]
    }
    await nextTick()
    await binDraw(chartBin1, data1)
    await binDraw(chartBin2, data2)
    await binDraw(chartBin3, data3)
    await binDraw(chartBin4, data4)
  } catch (error) {
    console.error('Error in getZiWaiXian:', error)
  }
}

// 表格数据
const tableData = [
  {
    id:1,
    date: 'SWG-NXAIR',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:2,
    date: 'SWG-80B10',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:3,
    date: 'SWG-80B10',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:4,
    date: 'SWG-NXPLUS C',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:5,
    date: 'SWG-NXPLUS C',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
// 组件卸载时清理
onUnmounted(() => {
})

onMounted(() => {
  getStitic()
})
</script>

<template>
  <div>
    <div class="con-body-1">
      <div class="barItem">
        <div ref="chartBin1" class="barBox"></div>
        <div class="textBox">Today</div>
      </div>
      <div class="xiantiao"></div>
      <div class="barItem">
        <div ref="chartBin2" class="barBox"></div>
        <div class="textBox">Last 7 days</div>
      </div>
      <div class="xiantiao"></div>
      <div class="barItem">
        <div ref="chartBin3" class="barBox"></div>
        <div class="textBox">Last 30 days</div>
      </div>
      <div class="xiantiao"></div>
      <div class="barItem">
        <div ref="chartBin4" class="barBox"></div>
        <div class="textBox">Last 90 days</div>
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="con-body-2">
      <div class="tabtitle">Top 3 most frequent alarms</div>
      <div class="taberbox">
        <el-table :data="tableData" style="width: 100%" max-height="300">
          <el-table-column prop="date" label="Top Ranking" width="190" />
          <el-table-column prop="name" label="Parent Asset" width="180" />
          <el-table-column prop="address" label="Feeder" />
          <el-table-column prop="address" label="Panel No." center />
          <el-table-column prop="address" label="Event Description" />
        </el-table>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.con-body-1 {
  width: 100%;
  height: 360px;
  background-color: #1c2028;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;

  .barItem {
    width: 380px;

    .barBox {
      width: 380px;
      height: 300px;
    }

    .textBox {
      width: 100%;
      text-align: center;
      color: #929597;
      font-size: 20px;
    }
  }

  .xiantiao {
    background-color: #323334;
    width: 1px;
    height: 250px;
    margin-top: 45px;
  }


}

.con-body-2 {
  width: 100%;
  height: 400px;
  background-color: #1c2028;
  padding: 20px 20px;
  box-sizing: border-box;

  .taberbox {
    .el-table {
      border-color: black;

      :deep(th) {
        border: 1px solid #1d2028;
      }

      :deep(td) {
        border: 1px solid #000000;
      }
    }



    :deep(.el-table) {
      --el-table-border-color: black;
    }

    :deep(.el-table) th {
      background: #302f38;
      color: #e9e7e7;
      height: 60px;
      font-size: 18px;
      // text-align: center;
    }

    :deep(.el-table) tr {
      background: #1c222a;
      color: #929597;
      height: 60px;
      font-size: 16px;
    }

    :deep(.el-table__body) tr.current-row>td {
      background-color: #78f709 !important;
      // /* color: #f19944; */
      /* 设置文字颜色，可以选择不设置 */
    }

    :deep(.el-table--enable-row-hover) .el-table__body tr:hover>td {
      // background-color: #f6d604 !important;
      cursor: pointer;
      /* 修改鼠标样式 */
      color: #000000;
      /* 设置文字颜色，可以选择不设置 */
    }

    :deep(.el-table__empty-block) {
      background-color: #000000;
    }
  }
  .tabtitle{
    width: 500px;
    padding: 20px 0px;
    box-sizing: border-box;
    font-size: 20px;
    color: #929597;
    font-weight: bold;
  }
}
</style>
